<template>
  <BasicDrawer
    :destroyOnClose="true"
    v-bind="$attrs"
    @register="registerDrawer"
    :showFooter="true"
    :title="state.title"
    width="720px"
    :maskClosable="false"
  >
    <template #footer>
      <div>
        <a-button @click="closeDrawer">取消</a-button>&nbsp;
        <a-button type="primary" v-if="!record.signName" @click="onSignature">签名</a-button>
      </div>
    </template>
    <div class="card">
      <div class="c-title"> 基础信息</div>

      <div class="c-body">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 退单编号</a-col>
          <a-col :span="9" class="value" >
            {{ record.masterOrderSn }}
          </a-col>


          <a-col :span="3" class="label"> 退单时间</a-col>
          <a-col :span="9" class="value">
            {{ record.addTime }}
          </a-col>

          <a-col :span="3" class="label"> 操作人</a-col>
          <a-col :span="9" class="value">
            {{ record.cashierName }}
          </a-col>

          <a-col :span="3" class="label"> 关联订单</a-col>
          <a-col :span="9" class="value" style="cursor: pointer; color: #f1a3b8;"  @click="onOrderDetail">
            {{ record.oldOrderSn }}
          </a-col>

          <a-col :span="3" class="label"> 用户信息</a-col>
          <a-col :span="9" class="value">
            {{ record.memberName }}&nbsp;{{ record.memberMobile }}
          </a-col>
        </a-row>
      </div>

      <div class="c-title" style="margin: 32px 0 6px 0"> 退款信息</div>

      <div class="c-body" v-for="(item, index) in record.responseMasterOrderItemBeanList" :key="index">
        <a-row :gutter="[12, 12]">
          <a-col :span="3" class="label"> 商品名称</a-col>
          <a-col :span="9" class="value">
            {{ item.goodsName ?? '--' }}
          </a-col>

          <a-col :span="3" class="label"> 退货数量</a-col>
          <a-col :span="9" class="value">
            {{ item.goodsQty ?? '--' }}
          </a-col>

          <a-col :span="3" class="label"> 退款类型</a-col>
          <a-col :span="9" class="value">
            {{ item.refundChannels == '1' ? item.extensionCode === 'times' ? '退卡次数' : '退卡余额' : item.refundChannels == '2' ? '退现金' : '--' }}
          </a-col>

          <a-col :span="3" class="label"> 退款金额</a-col>
          <a-col :span="9" class="value">
            {{item.refundChannels == '1' && item.extensionCode === 'times' ? '无' : Math.abs(record.totalFee)}}
          </a-col>

          <a-col :span="3" class="label"> 退款方式</a-col>
          <a-col :span="9" class="value">
            {{ item.refundChannels == '1' ? '无' : item.payExtensionCode == 'cash' ? '现金' : item.payExtensionCode ==='cash_wechat'  ? '微信' : item.payExtensionCode == 'cash_alipay' ? '支付宝' : item.payExtensionCode == 'cash_bank_card' ? '银联' : '--' }}
          </a-col>

          <a-col :span="3" class="label"> 退款原因</a-col>
          <a-col :span="9" class="value">
            {{ record.cancelCustom || '--' }}
          </a-col>
          <a-col :span="3" class="label"> 客户签名</a-col>
          <a-col :span="9" class="value">
            <span v-if="!record.signName">--</span>
            <img v-else :src="record.signName" alt="" style="width: 160px; object-fit: contain" />
          </a-col>
        </a-row>

      </div>
    </div>
  </BasicDrawer>

  <OrderSignature @register="registerSignature" @complete="loadData" />
  <OrderDetail @register="registerDetail" />
</template>

<script setup>
  import { defineOptions, reactive, ref } from 'vue';

  import { BasicDrawer, useDrawerInner, useDrawer } from '@/components/Drawer';

  import { useMessage } from '@/hooks/web/useMessage';
  import { POST } from '@/api/http.js';
  import OrderSignature from '../cashier/order-signature.vue';
  import OrderDetail from '../cashier/order-detail.vue';

  defineOptions({ name: 'BackDetail' });

  const emit = defineEmits(['complete']);
  const state = reactive({ title: '' });
  const record = ref({});

  const { createMessage } = useMessage();
  const [registerSignature, { openDrawer: signatureDrawer }] = useDrawer();
  const [registerDetail, { openDrawer: detailDrawer }] = useDrawer();

  const [registerDrawer, { closeDrawer }] = useDrawerInner(async ({record:item}) => {
    state.title = '退单详情';
    record.value = item ?? {};
    if (item.orderType === 2) {
      Object.assign(state, { masterOrderSn: item.masterOrderSn });
    } else {
      const more = item.responseMasterOrderItemBeanList?.find(
        (o) => o.masterOrderSn === masterOrderSn && o.goodsName === goodsName,
      );
      Object.assign(state, { more, masterOrderSn: item.masterOrderSn, oldOrderSn: item.oldOrderSn, signName: item.signName, goodsName: item.goodsName, responseMasterOrderItemBeanList: item.responseMasterOrderItemBeanList });
    }
    await loadData()
  });

  async function loadData() {
    const { masterOrderSn, oldOrderSn } = state;
    record.value = await POST('/cashier/getMasterOrderDetailsBean', {
        masterOrderSn,
        oldOrderSn,
      }) ?? {};
  }

  function onSignature() {
    signatureDrawer(true, { orderHeader: record });
  }

  function onOrderDetail() {
    detailDrawer(true, { masterOrderSn: record.value.masterOrderSn, oldOrderSn: record.value.oldOrderSn, isTD: true });
  }
</script>

<style lang="less" scoped>
  .card {
    margin: 8px 0 46px;
    padding: 12px;

    .c-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 8px;
      color: #091f3d;
      font-size: 15px;
      font-weight: 600;
    }

    .c-body {
      margin-top: 16px;

      .label {
        color: #acb4bf;
      }

      .value {
        color: #091f3d;
      }
    }

    .customer_signature {
      position: fixed;
      bottom: 5%;
      right: -50px;

      .label {
        font-size: 18px;
        width: 220px;
      }
    }
  }
</style>
